import React from "react";
import { Provider } from "react-redux";
import { ConfigProvider, theme } from "antd";
import { useSelector } from "react-redux";
import { store } from "./store";
import AppRouter from "./router";

const ThemeWrapper = ({ children }) => {
  const { theme: currentTheme } = useSelector((state) => state.layout);

  return (
    <ConfigProvider
      theme={{
        algorithm:
          currentTheme === "dark"
            ? theme.darkAlgorithm
            : theme.defaultAlgorithm,
      }}
    >
      {children}
    </ConfigProvider>
  );
};

function App() {
  return (
    <Provider store={store}>
      <ThemeWrapper>
        <AppRouter />
      </ThemeWrapper>
    </Provider>
  );
}

export default App;
